<template>
  <div>
	<div class="prop_box">
                  <el-row :gutter="20">
                    <template
                      v-for="(item, index) in state.formDetail.catProp"
                      :key="item.id"
                    >
                      <el-col :span="8" class="mb20">
                        <!-- 输入框 -->
                        <el-form-item
                          v-if="item.type === 'INPUT'"
                          :label="item.name"
                          :prop="'catProp.' + index + '.value.value'"
                          :rules="{
                            required:
                              item.requiredRule == 'true' ? true : false,
                            trigger: 'blur',
                            validator: (rule, value, callback) =>
                              validateInput(rule, value, item, callback),
                          }"
                        >
                          <el-input
                            style="width: 280px !important"
                            v-model.trim="
                              state.formDetail.catProp[index].value.value
                            "
                            clearable
                          ></el-input>
                        </el-form-item>
                        <!-- 下拉单选 -->
                        <el-form-item
                          v-if="item.type === 'SINGLECHECK'"
                          :label="item.name"
                          :prop="'catProp.' + index + '.value.value'"
                          :rules="{
                            required:
                              Boolean(item?.requiredRule) === true
                                ? true
                                : false,
                            trigger: 'change',
                            validator: (rule, value, callback) =>
                              validateSelect(rule, value, item, callback),
                          }"
                        >
                          <el-select
                            clearable
                            filterable
                            style="width: 280px !important"
                            v-model="
                              state.formDetail.catProp[index].value.value
                            "
                          >
                            <el-option
                              v-for="item2 in item.options"
                              :value="item2.value"
                              :key="item2.value"
                              :label="item2.displayName"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                        <!-- 下拉多选 -->
                        <el-form-item
                          v-if="item.type === 'MULTICHECK'"
                          :label="item.name"
                          :rules="{
                            validator: (rule, value, callback) =>
                              validateMultiCheck(rule, value, item, callback),
                          }"
                          :prop="'properties.' + index + '.value'"
                        >
                          <el-select
                            clearable
                            filterable
                            style="width: 280px !important"
                            multiple
                            v-model="state.formDetail.catProp[index].value"
                            @change="multiCheck($event, item)"
                          >
                            <el-option
                              v-for="item2 in item.options"
                              :value="item2.value"
                              :key="item2.value"
                              :label="item2.displayName"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                        <!-- 组合式下拉+输入框 -->
                        <el-form-item
                          v-if="item.type == 'MULTICOMPLEX'"
                          :label="item.name"
                          :prop="'catProp.' + index + '.complexValues'"
                          :rules="{
                            required: item.required,
                            validator: (rule, value, callback) =>
                              validateComplex(rule, value, item, callback),
                            trigger: ['change', 'blur'],
                          }"
                        >
                          <div class="complex-box">
                            <el-row
                              v-for="(i, idx) in state.formDetail.catProp[index]
                                ?.complexValues"
                              :key="idx"
                            >
                              <el-form-item
                                :prop="
                                  'catProp.' + index + '.complexValues' + idx
                                "
                              >
                                <el-col :span="8">
                                  <el-select
                                    filterable
                                    class="select"
                                    v-model="
                                      i.fieldMap.material_prop_name.value.value
                                    "
                                    @change="selChange($event, i)"
                                  >
                                    <el-option
                                      v-for="(item, index) in i.fieldMap
                                        .material_prop_name.options"
                                      class="options"
                                      :key="index"
                                      :label="item.displayName"
                                      :value="item.value"
                                    ></el-option> </el-select
                                ></el-col>
                                <el-col :span="8">
                                  <el-input
                                    class="input"
                                    clearable
                                    v-model.trim="
                                      i.fieldMap.material_prop_content.value
                                        .value
                                    "
                                  >
                                    <template #append>
                                      <span>%</span>
                                    </template>
                                  </el-input></el-col
                                >
                                <el-col :span="2">
                                  <el-icon @click="removeItem(item, idx)">
                                    <Delete />
                                  </el-icon>
                                </el-col>
                              </el-form-item>
                            </el-row>
                            <div>
                              <el-button
                                @click="addComplex(item, index)"
                                plain
                                type="dashed"
                                >添加材质成分</el-button
                              >
                            </div>
                          </div>
                        </el-form-item>
                      </el-col>
                    </template>
                  </el-row>
                </div>
  </div>
</template>

<script setup>
import { fieldList,
fieldMap,catProp } from "@/data/fieldList";
import { onMounted, reactive } from "vue";
const state = reactive({
	formDetail:{}
})

onMounted(() => { 
	state.formDetail.catProp = fieldList
})

// 下拉单选校验
const validateSelect = (rule, value, item, callback) => {
  if (rule.required && !value) {
    callback(new Error("不能为空"));
  } else {
    callback();
  }
};

// 输入框校验
const validateInput = (rule, value, item, callback) => {
  if (rule.required && !value) {
    callback(new Error("不能为空"));
  } else if (value) {
    if (item.maxLengthRule) {
      const len = getByteLen(value);
      if (len > Number(item.maxLengthRule)) {
        callback(new Error("字符长度不能超过" + item.maxLengthRule));
      } else {
        callback();
      }
    } else {
      callback();
    }
  } else {
    callback();
  }
};

// 复合型校验
const validateComplex = (rule, value, item, callback) => {
  if (rule.required && !value) {
    callback(new Error("不能为空"));
  } else if (value) {
    callback();
  } else {
    callback();
  }
};

// 下拉多选校验
const validateMultiCheck = (rule, value, item, callback) => {
  if (rule.required && !value) {
    callback(new Error("不能为空"));
  } else if (value) {
    if (item.maxValueRule) {
      const len = value.length;
      if (len > Number(item.maxValueRule)) {
        callback(new Error("最多只能选择" + item.maxValueRule + "项"));
      } else {
        callback();
      }
    } else {
      callback();
    }
  } else {
    callback();
  }
};

</script>

<style scoped lang='scss'>
  .prop_box {
    background-color: #f7f8fa;
    box-sizing: border-box;
    padding: 20px 20px 0 20px;
    border-radius: 6px;
  }


</style>